<template>
	 <div>
        <div class="y-blogsLeft col-lg-2 col-md-2 col-sm-2">
            <div>
                <h4 style="padding:28px 0;background:rgba(255,255,255,.6)">图片分类上传</h4>
            </div>
            <div>
                <Tree class="y-tree" @on-select-change="textmothods" :data="baseData"></Tree>
                <!--操控树的按钮-->
                <div class="y-changetree">
                    <Input :class="{'y-treeinput':showclass,'y-treeinputC':hideclass,'animated':hideclass,'zoomIn':hideclass}" v-model="treeValue"  size="small" placeholder="输入树名"></Input>
                    <Button class="y-treebtn" v-on:click="addpar" type="ghost">添加根树</Button>
                    <Button class="y-treebtn" v-on:click="addchi" type="ghost">添加子树</Button>
                    <Button class="y-treebtn" v-on:click="changetree" type="ghost">修改树名</Button>
                    <Button class="y-treebtn" v-on:click="deletetree" type="dashed">删除选树</Button>
                </div>
                <div>
                	<Upload
				        multiple
                        ref="upload"
                        :show-upload-list="true"
                        :on-success="handleSuccess"
                        :format="['jpg','jpeg','png']"
                        :max-size="4096"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="handleBeforeUpload"
				        type="drag"
                        name="avatar"
				        action="http://localhost:3000/upload/imgfile">
				        <div style="padding: 20px 0">
				            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
				            <p>点击或将文件拖拽到这里上传</p>
				        </div>
				    </Upload>
                </div>
            </div>
        </div>
        <div class="y_blogsRight col-lg-10 col-md-10 col-sm-10">
                <file-table :query='queryData' ref="update"></file-table>
        </div>
    </div>
</template>

<script type="text/javascript">
	import File from '../file/imageTable.vue'

    export default {
        data () {
            return {
                showclass:true,
                hideclass:false,
                parentId:'',
                orshow:false,
                treeValue:'',
                baseData:[],
                queryData:[],
                //图片属性
                uploadList: []
            }
        },
        methods: {
            handleSuccess (res, file) {
                // console.log(this.$refs.update) //返回的是一个vue对象，所以可以直接调用其方法
                setTimeout(()=>{
                    this.$refs.update.reload(); 
                },800)
                //使用延时器是解决钩子函数快过数据的存储
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            },
            //图片上传的钩子
            textmothods (tree) {
                this.parentId = tree[0]._id;
                this.getTableDate();
            },
            getTableDate () {
                this.$http({
                    method:"POST",
                    url:'http://localhost:3000/content/listtoo'+this.parentId,
                    // data:this.parentId
                })
                .then((response) => {
                    this.queryData = response.data
                })
                .catch((response) => {});

            },
            addpar () {//添加父树
                // this.orshow = true;
                if (!this.orshow) {
                    this.hideclass = true;
                    //利用vue的双向数据绑定思想对样式进行动态的修改
                    this.orshow = true;
                }else {
                    if (this.treeValue === '') {
                        alert('请输入树名')
                    }else {
                        this.$http({
                            method:"POST",
                            url:'http://localhost:3000/cate2/data',
                            data:{
                                title:this.treeValue,
                                label:this.treeValue,
                                value:this.treeValue,
                            }
                        })
                        .then((response) => {
                            this.geteDate ();
                            this.clertVlue ();
                            console.log(response)
                        })
                        .catch((response) => {
                            console.log(response)
                        });

                    }
                    
                }

            },
            addchi () {
                if(!this.orshow) {
                    this.hideclass = true;
                    this.orshow = true;
                }else {
                     if (this.treeValue === '' || this.parentId == '') {
                        alert('操作失误')
                    }else {
                        this.$http({
                            method:"POST",
                            url:'http://localhost:3000/cate2/data/',
                            data:{
                                title:this.treeValue,
                                parentId:this.parentId
                            }
                        })
                        .then((response) => {
                            this.geteDate ();
                            this.clertVlue ();

                        })
                        .catch((response) => {
                            console.log(response)
                        });
                    }
                }
            },
            deletetree () {//删除树的样式
                this.orshow = false;
                     this.hideclass = false;
                if (this.parentId == '') {
                    alert('请选择要删除的树');
                } else {
                    this.$http({
                        method:"DELETE",
                        url:'http://localhost:3000/cate2/data/'+this.parentId,
                    })
                    .then((response) => {
                        this.geteDate ();
                        this.parentId = '';
                    })
                    .catch((response) => {
                        console.log(response)
                    });
                }
            },
            changetree () {
                if(!this.orshow) {
                    this.hideclass = true;
                    this.orshow = true;
                }else {
                     if (this.treeValue === '' || this.parentId == '') {
                        alert('未点击树或不能为空的树名')
                    }else {
                        this.$http({
                            method:"POST",
                            url:'http://localhost:3000/cate2/data/'+this.parentId,
                            data:{
                                title:this.treeValue,
                            }
                        })
                        .then((response) => {
                            this.geteDate ();
                            this.clertVlue ();

                        })
                        .catch((response) => {
                            console.log(response)
                        });
                    }
                }
            },
            geteDate () {
                this.$http({
                method:"GET",
                url:'http://localhost:3000/cate2/list',
                })
                .then((response) => {
                    // response.date.
                    this.baseData = response.data;
                })
                .catch((response) => {
                    console.log(response)
                });
            },
            clertVlue () {
                this.treeValue = '';
                this.parentId = ''; 
            }
        },
        created: function () {
            this.geteDate ();
        },
        components: {
            'file-table': File
        }
    }
</script>

<style type="text/css" lang='scss' scoped>
	.y-tree {
        font-size: 28px;
    }
    .y-changetree{
        margin-top: 16px;
        .y-treeinput{
            margin:8px 0;
            display: none;
        }
        .y-treeinputC{
            display: block;
        }
        .y-treebtn{
            margin:4px 0
        }
    }
</style>